<template>
  <div class="control-cart flex-def flex-cCenter">
    <transition name="move">
      <div class="control-decrease inline-block poi"
           v-show="food.count"
           @click.stop.prevent="decreaseCart">
        <span class="inner icon-remove_circle_outline f24 inline-block"></span>
      </div>
    </transition>
    <div v-show="food.count"
         class="num-wrapper t-c">
      <span class="num f14 fw300">{{ food.count }}</span>
    </div>
    <div class="control-add inline-block poi"
         @click.stop.prevent="addCart">
      <span class="inner icon-add_circle inline-block f24 inline-block"></span>
    </div>
  </div>
</template>

<script>
const EVENT_ADD = 'add';
export default {
  'name': 'control-cart',
  'props': {
    'food': {
      'type': Object,
      'default': {}
    }
  },
  data() {
    return {};
  },
  'components': {},
  created() {
    // data数据已经初始化，但是DOM结构渲染完成，组件没有加载
  },
  mounted() {
    // DOM渲染完成，组件挂载完成
  },
  'computed': {
  },
  'methods': {
    addCart(event) {
      if (!event._constructed) return;
      if (!this.food.count) this.$set(this.food, 'count', 1);
      else this.food.count += 1;
      this.$emit(EVENT_ADD, event.target);
    },
    decreaseCart(event) {
      if (!event._constructed) return;
      if (this.food.count > 1) this.food.count -= 1;
      else if (this.food.count === 1) this.$delete(this.food, 'count');
    }
  },
  'watch': {}
};
</script>

<style lang="stylus" rel="stylesheet/stylus">
@import '~common/stylus/mixin'
.control-cart
  .control-add, .control-decrease
    padding(6, 6, 6, 6)
    color #00a0dc
  .control-decrease
    opacity 1
    &.move-enter-active, &.move-leave-active
      transition all 0.4s linear
    &.move-enter, &.move-leave-active
      opacity 0
      transform translate3d(18px, 0, 0)
      .inner
        transform rotate(180deg)
    .inner
      line-height 24px
      transition all 0.4s linear
      transform rotate(0)
  .num-wrapper
    line-height 24px
    color #666
    width 12px
</style>
